<!-- 
  1. 树形结构处理
     思路：
      1. 以原数组中的每一项的id作为key,以每一项自身(对象)作为value,依次存入空对象中 (查找方便)
      2. 遍历原数组 通过每一项的pid去第一步形成的对象中去匹配key(id),如果匹配上代表找到父节点
         添加到它的children树形中(push),如果没有匹配,直接push到最终要产出的数组中

         如何判断某个值能在对象中存在一个对应key
         if(map[item.pid]){

         }

   2. 删除业务
       1. 危险操作 先提示用户 等待用户确认
       2. 确认之后需要调用删除接口 (参数)
       3. 删除接口调用成功之后的后续操作 (更新列表重新拉取接口  提示用户 )

   3. 新增业务
       1. 表单收集信息, 表单校验
       2. 兜底校验 
       3. 兜底校验通过之后调用接口 (参数 二次加工)
       4. 后续逻辑操作 (更新列表 清除校验结果 表单数据初始化 提示用户)

   4. 编辑业务
      1. 业务流程
         1. 回显(回填数据) -> 用户编辑操作 -> 调用更新接口
            回显 
              1. 拿到当前要编辑项的id值
              2. 调用接口的时候 如何获取id (父传子 /  this.$refs.sonComponent.getDetail())
            编辑
              1. 双向绑定  视图修改 -> 数据
            调用更新接口
              1. 解决什么情况下要调用更新接口 (this.form.id)

      2. 对比新增和编辑
          1. 可复用的逻辑
             1. 都需要打开弹框
             2. 都需要固定的表单项
             3. 都需要兜底校验和表单基础校验
             4. 调用接口之后都需要更新列表
             5. 接口成功之后都需要关闭弹框
             6. ...

          2. 需要加判断的逻辑
             1. 调用接口的时候 根据this.form.id 调用不同的接口
             2. (额外)校验code 编辑和新增 codeList是不同的 (根据this.form.id 去生成不同的用来做判断条件的codeList)

    5. 小坑记录
        elementUI el-form  实例方法  resetFields 初始化表单对象  清除校验痕迹
        初始化表单对象只能针对于对象中默认就有的字段 新增的不管

        处理方式：初始化数据的操作我们自己来做

    6. dev-tools小技巧
         查找组件是根据name属性来显示的
         为了配置工具快速定位组件的位置 写.vue文件的时候 默认就给它一个语义化的name选项
-->